<script setup>
import { label,cardColor } from '../utils/data';
import { dataOne } from '../utils/function';
import { ref,defineEmits,watch,computed } from 'vue';
import {insertFeedbackApi} from '../api/index.js'
import { useUserIdStore } from '../stores/user';
const userIdStore = useUserIdStore();
const props = defineProps({
    width: {
        default: '100%',
    },
    background: {
        default: 'rgba(252, 175, 162, 0.30)',
    },
    notes:{
        default:{},
    }
    
})
const card = props.notes;
const emit = defineEmits(['toDetail'])
const toDetail = () => {
    emit('toDetail')
}
watch(
    () => userIdStore.user,
    (newUser, oldUser) => {
      if (newUser) {
        clickLike();
      }
    }
  );
  const user = computed(() => {
  return userIdStore.user;
});
const clickLike = () => {
    if(card.islike[0].count === 0){
        let data = {
            wallId:card.id,
            userId:user.value,
            type:0,
            moment:new Date(),
        }
        console.log(data);
        insertFeedbackApi(data).then((res)=>{
            console.log(res);
            //反馈成功后，更新卡片数据
            card.islike[0].count++;
            card.like[0].count++;
        })
    }
}
</script>

<template>
    <div class="note-card" :style="{ width: width, background: cardColor[card.color] }">
        <div class="top">
            <p class="time">{{ dataOne(card.moment) }}</p>
            <p class="label">{{ label[card.type][card.label] }}</p>
        </div>
        <p class="message" @click="toDetail">{{ card.message }}</p>
        <div class="foot">
            <div class="foot-left">
                <div class="icon" @click="clickLike">
                    <span class="iconfont icon-xin" :class="{islike:card.islike[0].count > 0}"></span>
                    <span class="value">{{ card.like[0].count }}</span>
                </div>
                <div class="icon">
                    <span class="iconfont icon-liuyan"></span>
                    <span class="value">{{ card.comcount[0].count }}</span>
                </div>
            </div>
            <div class="name"> {{ card.name }}</div>
        </div>

    </div>
</template>

<style lang="less" scoped>
@import "../assets/fonts/icon/iconfont.css";

.note-card {
    height: 240px;
    padding: 10px 20px 16px 20px;
    box-sizing: border-box;
    position: relative;

    .top {
        display: flex;
        justify-content: space-between;
        padding-bottom: @font-size-16;

        p {
            font-size: @font-size-12;
            color: @gray-3;
        }
    }

    .message {
        height: 140px;
        font-size: @font-size-16;
        color: @gray-1;
        text-indent: 2em;
        font-family:fa;
        cursor: pointer;
    }

    .foot {
        display: flex;
        justify-content: space-between;
        position: absolute;
        bottom: @font-size-16;
        left: 0;
        padding: 0 20px;
        box-sizing: border-box;
        width: 100%;

        .foot-left {
            display: flex;
            .icon{    
                padding: @padding-8;
                display: flex;
                align-items: center;
            .value{
                font-size: @font-size-12;
                color: @gray-3;
                margin-right: @font-size-16;
                padding-left: @padding-4;
            }
            .iconfont {
                font-size: @font-size-16;
                color: @gray-3;
            }
            .icon-xin{
                cursor: pointer;
                transition: @tr;
                &:hover{
                    color: #F67770;
                }
            }
           .islike{
                color: #F67770;
           }

            }
        }
        .name{
                font-family:fa;
                font-size: @font-size-16;
                color: @gray-1;
                font-weight: 600;
            }
    }
}
</style>
